<template>
    <div id="pie3d"> 
      <div class="pie3d" style="width:400px;height:230px;margin:0 auto" ref="pie3d">
  
      </div>
    </div>
  </template>
  
  <script type="text/javascript">
  
    import * as echarts from 'echarts'
  
    export default {
  
      name: "",
      components: {
      },
      data() {
        return {
          allNum: 503,
          pieData: [
  
            { value: (Math.random() * 300).toFixed(0), name: '科学规划' },
            { value: (Math.random() * 300).toFixed(0), name: '农业培育' },
            { value: (Math.random() * 300).toFixed(0), name: '名称古迹' },
            { value: (Math.random() * 300).toFixed(0), name: '教育' },
            { value: (Math.random() * 300).toFixed(0), name: '旅游' },
  
          ],
          mapChart: null,
          option: null,
          timer: null,
          timer1: null,
  
        }
      },
      mounted() {
  
        this.$nextTick(() => {
          this.draw();
          // this.timer = setInterval(() => {
          this.doing();
          // }, 200);
          this.timer1 = setInterval(() => {
            this.pieData = [
  
              { value: (Math.random() * 300).toFixed(0), name: '科学规划' },
              { value: (Math.random() * 300).toFixed(0), name: '农业培育' },
              { value: (Math.random() * 300).toFixed(0), name: '名称古迹' },
              { value: (Math.random() * 300).toFixed(0), name: '教育' },
              { value: (Math.random() * 300).toFixed(0), name: '旅游' },
  
            ] 
            // this.draw();
            // this.doing();
          }, 2000);
        });
      },
      beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
      },
      methods: {
        draw() {
          this.mapChart = echarts.init(this.$refs.pie3d)
           
        },
        _pie() {
          let dataArr = [];
          for (var i = 0; i < 50; i++) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 60,
              itemStyle: {
                color: '#3D7580',
              },
            });
          }
          return dataArr;
        },
        doing() {
          // this.option.series[2].startAngle = this.option.series[2].startAngle + 5;
          this.mapChart.setOption(this.option);
        }
      }
    }
  </script>
  
  <style lang="scss" scoped>
     
  </style>